<template>
  <div>
    <p style="float: left; font-size: 18px">
      <span style="color: orange">|   </span>
      <span style="font-weight: bold">支持人数</span>
    </p>
    <div id="main" style="width: 600px; height: 400px; margin-left: 100px;"></div>

    <p style="float: left; font-size: 18px">
      <span style="color: orange">|   </span>
      <span style="font-weight: bold">关注人数</span>
    </p>
    <div id="ma" style="width: 600px; height: 400px;margin-top:100px"></div>
  </div>
</template>



<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "支持人数",
            type: "bar",
            barWidth: "60%",
            data: [],
          },
        ],
      },
      gz: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "关注人数",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    async showzc() {
      var id = window.sessionStorage.getItem("userid");
      var res = await this.$http.get("selectItemUserid?userid=" + id);
      this.option.xAxis[0].data = res.data.data[0];
      console.log(this.option.xAxis.data);
      this.option.series[0].data = res.data.data[1];
      console.log(this.option.series[0].data);
      var ch = echarts.init(document.getElementById("main"));
      ch.setOption(this.option);
    },
    async showgz() {
      var id = window.sessionStorage.getItem("userid");
      var res = await this.$http.get("selectItemByIdAndwu?userid=" + id);
      this.gz.series[0].data = res.data.data;
      console.log(this.gz.series[0].data);
      var ch = echarts.init(document.getElementById("ma"));
      ch.setOption(this.gz);
    },
  },
  mounted() {
    this.showgz();
    this.showzc();
  },
};
</script>

<style>
</style>